<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="/js/vue.min.js"></script>
		<script src="/js/jquery-3.1.1.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<style>
		.login-one{
		  background-image:url(/image/login1.jpg);
		  background-size: cover;
		  background-repeat:no-repeat;
		  overflow:hidden;
		  height: 100%;
		}
		
	
		</style>
	</head>
	<body class="login-one">
		<div id="app">
			<!-- 用户登录 -->
				<el-form  class="demo-ruleForm" label-width="100px" style="background-color: white;width: 500px;position: fixed;left:35%;top:30%;border-radius: 10px;">
					 <h1 align="center">人力资源管理系统</h1>
			
					<el-form-item label="用户名" prop="userName" >
							<el-col :span="22">
								<el-input v-model="userInfo.userName" ></el-input>
							</el-col>
					</el-form-item>
					
					<el-form-item label="密码" prop="userPwd">
						<el-col :span="22">
							<el-input  v-model="userInfo.userPwd" show-password></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="输入邮箱地址" prop="email">
						<el-col :span="22">
							<el-input  v-model="email" ></el-input>
						</el-col>
						<el-button icon="el-icon-plus" type="success" size="mini" @click="codeSend">发送验证码</el-button>
					</el-form-item>

					<el-form-item label="输入验证码" prop="code">
						<el-col :span="22">
							<el-input  v-model="code"></el-input>
						</el-col>
					</el-form-item>

				
					<el-form-item >
							<el-button icon="el-icon-user-solid" type="success" size="mini" @click="login">登录</el-button>
							<el-button icon="el-icon-delete" type="success" size="mini">重置</el-button>
					</el-form-item>
				</el-form>

		</div>
		
	</body>
	
	<script>
			new Vue({
				el:"#app",
				data:{
					 userInfo:{ // 登录的请求查询
						 userName:"",
						 userPwd:"",
					 },
					email:"", // 邮箱
					code:"", // 验证码
				},
				methods:{

					codeSend:function () {
						//把vue对象传递一个变量self
						const self = this;
						//发送ajax请求，来获取服务端返回的数据
						$.ajax({
							url:"/user/sendCode",//服务器接口地址
							data:{
								email:this.email,
							},
							success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
								if(rs.code==200){
									self.$message(rs.msg);
								}else{
									self.$message(rs.msg);

								}
							}
						})
					},
					login:function(){
						//把vue对象传递一个变量self
						const self = this;
						// 发送ajax请求，来获取服务端返回的数据
						$.ajax({
							url:"/user/loginCode",//服务器接口地址
							data:{
								code:this.code,
							},
							success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
								if(rs.code==200){
									self.$message(rs.msg);

								}else{
									self.$message(rs.msg);

								}
							}
						})
						$.ajax({
							url:"/user/login",//服务器接口地址
							type:"post",
							data:JSON.stringify(this.userInfo),//参数
							contentType:"application/json",
							success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
								if(rs.code==200){
									// 把角色信息存到本地存储里
									sessionStorage.setItem("role",rs.data.role);
									sessionStorage.setItem("src",rs.data.src);
									sessionStorage.setItem("name",self.userInfo.userName);
									// 跳转到index页面
									window.location.href="/index";
								}else{
									self.$message(rs.msg);
									//清空
									self.list =[]
								}
							}
						})
					}
				},
				 
			})
	
	</script>
</html>
